<template>
	<view class="choose-country">
		<v-nav-bar  title="选择国家/地区">
		</v-nav-bar>
		            <view>
		                <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
		                @scroll="scroll">
	<view >
		<view @click="chooseCountry(country)" v-for="(country,index) in countryCodeList" class="choose-country__list">
			<view class="choose-country__list__country">
				{{country.zh}}
			</view>
			<view class="choose-country__list__code">
				+{{country.code}}
			</view>
		</view>
	</view>
		</scroll-view>
	</view>
	<view @tap="goTop" class="uni-link uni-center uni-common-mt">
		点击这里返回顶部
	</view>
				
	</view>
</template>

<script>
	import store from './store.js'
	export default {
		store:store,
		data() {
			return {
				countryCodeList:store.state.countryCode,
				code:store.state.code,
				            scrollTop: 44,
				            old: {
				                scrollTop: 44
				            }
			}
		},
		mounted(){
			console.log(this.$store)
		},
		methods: {
			chooseCountry(country){
				this.$store.state.code=country.code;
				// console.log("store.state.code",store.state.code)
				uni.navigateBack({
					animationDuration:200,
					animationType:"pop-out"
				})
			},
			        upper: function(e) {
			            console.log(e)
			        },
			        lower: function(e) {
			            console.log(e)
			        },
			        scroll: function(e) {
			            console.log(e)
			            this.old.scrollTop = e.detail.scrollTop
			        },
			        goTop: function(e) {
			            this.scrollTop = this.old.scrollTop
			            this.$nextTick(function() {
			                this.scrollTop = 0
			            });
			            uni.showToast({
			                icon:"none",
			                title:"纵向滚动 scrollTop 值已被修改为 0"
			            })
			        }
		}
	}
</script>

<style lang="less">
.choose-country{
	&__list{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: @uni-spacing-col-x-lg;
		padding-right: @uni-spacing-col-x-lg;
		padding-bottom: @uni-spacing-row-x-lg;
		&__code{
			color: @font-color-blue;
		}
		&__country{
			
		}
	}
	&__list:hover{
		background-color: @uni-bg-color-grey;
	}
}
</style>
